* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

$bgColor: #ff0008;
#root {
  margin: 50px auto;
  display: flex;

  & div {
    border-style: solid;
    border-width: 50px 30px;
    border-color: $bgColor;
    border-left-color: transparent;
  }

  $bgColorOld: red;
  @for $i from 1 through 7 {
    $colorNew: adjust-hue($bgColor, $i * 40);
    & div:nth-child(#{$i}) {
      border-color: $colorNew;
      border-left-color: $bgColorOld;

      @if ($i == 7) {
        border-color: transparent;
        border-left-color: $bgColorOld;
      }
      $bgColorOld: $colorNew;
    }
  }

}